<template>
  <div class="creteCourses">
    <el-card>
      <div slot="header">
        <el-steps :active="active" align-center>
          <el-step
            v-for="(item, i) in contentTitle"
            :key="item.id"
            :title="item.title"
            @click.native="active = i">
          </el-step>
        </el-steps>
      </div>
      <template>
         <el-form :model="course" :rules="rules" ref="course" label-width="100px"  size="small">
           <!-- 基本信息 -->
           <div v-show="active === 0">
             <el-form-item label="课程名称" prop="courseName">
               <el-input
                 v-model="course.courseName"
                 maxlength="50"
                 show-word-limit>
               </el-input>
             </el-form-item>
             <el-form-item label="课程简介" prop="brief">
               <el-input
                 v-model="course.brief"
                 maxlength="100"
                 show-word-limit>
               </el-input>
             </el-form-item>
             <el-form-item label="讲师姓名" prop="teacherName">
               <el-input
                 v-model="course.teacherDTO.teacherName"
                 maxlength="50"
                 show-word-limit>
               </el-input>
             </el-form-item>
             <el-form-item label="职位" prop="position">
               <el-input
                 v-model="course.teacherDTO.position"
                 show-word-limit
                 maxlength="50">
               </el-input>
             </el-form-item>
             <el-form-item label="讲师简介" prop="description">
               <el-input
                 v-model="course.teacherDTO.description"
                 show-word-limit
                 maxlength="100">
               </el-input>
             </el-form-item>
             <el-form-item label="课程概述" prop="previewFirstField" >
               <el-input
                 placeholder="概述1"
                 v-model="course.previewFirstField"
                 style="width:49%; margin-right:10px"
                 show-word-limit
                 maxlength="20">
               </el-input>
               <el-input
                 placeholder="概述2"
                 v-model="course.previewSecondField"
                 style="width:49%"
                 show-word-limit
                 maxlength="20">
               </el-input>
             </el-form-item>
             <el-form-item label="课程排序">
               <el-input v-model="course.sortNum" type="number">
                 <template slot="append">数字控制排序，数字越大排名越靠后</template>
               </el-input>
             </el-form-item>
           </div>
            <!-- 课程封面 -->
           <div v-show="active === 1">
           <!-- 图片上传组件 -->
            <el-form-item label="课程封面">
              <!-- 通过v-model实现course.courseListImg与courseImg组件value的双向数据绑定 -->
              <courseImg v-model="course.courseListImg"></courseImg>
            </el-form-item>
            <el-form-item label="解锁封面">
              <courseImg v-model="course.courseImgUrl"></courseImg>
            </el-form-item>
           </div>
           <!-- 销售信息 -->
           <div v-show="active === 2">
             <el-form-item label="售卖价格">
               <el-input type="number" v-model="course.discounts" :min="0">
                 <template slot="append">元</template>
               </el-input>
             </el-form-item>
             <el-form-item label="商品原价">
               <el-input type="number" v-model="course.price" :min="0">
                 <template slot="append">元</template>
               </el-input>
             </el-form-item>
             <el-form-item label="销量">
               <el-input type="number" v-model="course.sales" :min="0">
                 <template slot="append">单</template>
               </el-input>
             </el-form-item>
             <el-form-item label="活动标签">
               <el-input v-model="course.discountsTag">
                 <template slot="append">0/4</template>
               </el-input>
             </el-form-item>
           </div>
           <!-- 秒杀信息 -->
           <div v-show="active === 3">
             <el-form-item label="限时秒杀开关">
               <el-switch
                 v-model="course.activityCourse"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
                 :active-value="true"
                 :nactive-value="false">
               </el-switch>
             </el-form-item>
             <template v-if="course.activityCourse===true">
               <el-form-item label="开始时间">
                 <el-date-picker
                   v-model="course.activityCourseDTO.beginTime"
                   type="datetime"
                   placeholder="选择日期时间">
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="结束时间">
                 <el-date-picker
                   v-model="course.activityCourseDTO.endTime"
                   type="datetime"
                   placeholder="选择日期时间">
                 </el-date-picker>
               </el-form-item>
               <el-form-item label="秒杀价">
               <el-input type="number" v-model="course.activityCourseDTO.amount" :min="0">
                 <template slot="append">元</template>
               </el-input>
             </el-form-item>
             <el-form-item label="秒杀库存">
               <el-input type="number" v-model="course.activityCourseDTO.stock" :min="0">
                 <template slot="append">个</template>
               </el-input>
             </el-form-item>
             </template>
           </div>
           <!-- 课程详情 -->
           <div v-show="active === 4">
            <el-form-item>
              <text-edit v-model="course.courseDescriptionMarkDown"></text-edit>
            </el-form-item>
             <el-form-item>
               <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
             </el-form-item>
           </div>
           <el-form-item v-if="active !== contentTitle.length - 1">
             <el-button @click="active++" type="primary" size="small">下一步</el-button>
           </el-form-item>
         </el-form>
      </template>
    </el-card>
  </div>
</template>

<script>
import courseImg from './components/courseImg'
import textEdit from '@/components/textEditor'
import { saveOrUpdateCourse, getCourseById } from '@/services/courses'
export default {
  name: 'creteCourses',
  components: {
    courseImg,
    textEdit
  },
  // 接收点击课程编辑后,传递过来的课程id(这种接收方式是因为在路由设置了props: true属性
  props: {
    id: {
      type: [String, Number]
    }
  },
  created () {
    // 存在课程id值,才能够获取具体的课程信息
    if (this.id) {
      this.getCourseById()
    }
  },
  data () {
    return {
      // 确定步骤条的位置
      active: 0,
      // 步骤条标题信息
      contentTitle: [
        { id: 1, title: '基本信息' },
        { id: 2, title: '课程封面' },
        { id: 3, title: '销售信息' },
        { id: 4, title: '秒杀信息' },
        { id: 5, title: '课程详情' }
      ],
      // 表单信息
      course: {
        courseName: '',
        brief: '',
        teacherDTO: {
          teacherName: '',
          teacherHeadPicUrl: '',
          position: '',
          description: ''
        },
        courseDescriptionMarkDown: '<p>默认值</p>',
        price: 0,
        discounts: 0,
        priceTag: '',
        discountsTag: '',
        courseListImg: '',
        courseImgUrl: '',
        sortNum: 0,
        previewFirstField: '',
        previewSecondField: '',
        status: 0,
        sales: 0,
        activityCourse: false,
        activityCourseDTO: {
          beginTime: '',
          endTime: '',
          amount: 0,
          stock: 0
        },
        autoOnlineTime: ''
      },
      courseId: '',
      // 规则信息
      rules: {
        courseName: [
          { required: true, message: '请输入课程名称', trigger: true },
          { max: 50, message: '课程名称长度不超过50', trigger: true }
        ],
        brief: [
          { required: true, message: '请输入课程简介', trigger: true },
          { max: 100, message: '课程简介长度不超过100', trigger: true }
        ],
        previewFirstField: [
          { required: true, message: '请输入课程概述', trigger: true }
        ]
      }
    }
  },
  methods: {
    // 保存表单信息
    async onSubmit () {
      await this.$refs.course.validate()
      const { data } = await saveOrUpdateCourse(this.course)
      console.log(data)
      if (data.code === '000000') {
        if (this.id) {
          this.$message.success('数据修改成功')
        } else {
          this.$message.success('数据保存成功')
        }
        this.$router.push({ name: 'courses' })
      }
    },
    // 获取每一个课程的编辑信息
    async getCourseById () {
      const { data } = await getCourseById({ courseId: this.id })
      if (data.code === '000000') {
        // 因为在最开始添加秒杀时,没有设置秒杀信息
        // 所以当想要在编辑时,重新获取秒杀信息,就会报错,显示未定义
        // 这时,就只需要在请求编辑信息时,重新初始化activityCourseDTO即可
        if (!data.data.activityCourse) {
          data.data.activityCourseDTO = {
            beginTime: '',
            endTime: '',
            amount: 0,
            stock: 0
          }
        }
        this.course = data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
